<script setup>
import {useRouter} from "vue-router";
import {captcha, register} from "@/apis/auth/register/index.js";
import {message} from "ant-design-vue";

defineOptions({name: "Register"});
const router = useRouter();
const pageData = ref({
  loading: false,
  remember: false,
  expired: false,
  isOpenCaptcha: true,
  labelCol: {span: 6},
  wrapperCol: {span: 24},
  captchaImgBase64: "",
  formState: {
    key: null,
    username: "",
    password: "",
    email: "",
    mobile: "",
    name: "",
    gender: 1,
    captcha: "",
  },
  formRules: {
    username: [{required: true, message: "请输入账户", trigger: "blur"}],
    password: [{required: true, message: "请输入密码", trigger: "blur"}],
    captcha: [{required: true, message: "请输入验证码", trigger: "blur"}],
  },
});
const method = reactive({
  getCaptcha: () => {
    captcha().then(res => {
      if (res.code === 200) {
        pageData.value.captchaImgBase64 = res.data.image_base;
      } else {
        message.error(res.message);
      }
    });
  },
  submit: () => {
    register(pageData.value.formState).then(res => {
      if (res.code === 200) {
        message.success("注册成功");
        pageData.value.formState = {};
        router.push("/login");
      } else {
        message.error(res.message);
      }
    });
  },
});
onMounted(() => {
  method.getCaptcha();
});
</script>

<template>
  <div id="register">
    <div class="register-form">
      <a-form :model="pageData.formState" :rules="pageData.formRules" :label-col="pageData.labelCol"
              :wrapper-col="pageData.wrapperCol">
        <a-form-item>
          <img class="logo" src="/favicon.svg" alt=""/>
          <div class="head">Book Admin</div>
          <div class="desc">图 书 系 统 最 具 影 响 力 的 设 计 规 范 之 一</div>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="请输入账号" v-model:value="pageData.formState.username"/>
        </a-form-item>
        <a-form-item>
          <a-input
              placeholder="请输入密码"
              v-model:value="pageData.formState.password"
              type="password"
              autocomplete="off"
          />
        </a-form-item>
        <a-form-item>
          <a-input placeholder="请输入邮箱" v-model:value="pageData.formState.email"/>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="请输入手机号" v-model:value="pageData.formState.mobile"/>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="请输入姓名" v-model:value="pageData.formState.name"/>
        </a-form-item>
        <a-form-item>
          <a-select v-model:value="pageData.formState.gender">
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="2">女</a-select-option>
            <a-select-option :value="3">保密</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="pageData.isOpenCaptcha">
          <a-row :gutter="24">
            <a-col :span="14">
              <a-input placeholder="请输入验证码" v-model:value="pageData.formState.captcha"/>
            </a-col>
            <a-col :span="8">
              <div class="captcha-container" @click="method.getCaptcha">
                <img :src="pageData.captchaImgBase64" alt="验证码" class="captcha"/>
                <div v-if="pageData.expired" class="overlay">
                  <p>已过期，请刷新</p>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="pageData.remember">记住我</a-checkbox>
          <a class="forgot" href="#" @click.prevent="router.push('/login')"> 前往登录 </a>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button :loading="pageData.loading" type="primary" @click="method.submit">
            注册
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
#register {
  width: 100%;
  height: 100%;
  background: url('@/assets/img/register/background.svg');
  background-size: cover;

  .register-form {
    padding-top: 150px;
    margin: auto;
    width: 340px;
    min-height: 20px;

    //.ant-input {
    //  height: 42px;
    //  line-height: 42px;
    //  border-radius: 4px;
    //}

    .ant-btn {
      width: 100%;
      height: 42px;
    }
  }

  .logo {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 20px !important;
    width: 60px !important;
    border: none;
    background-color: transparent;
  }

  .head {
    position: absolute !important;
    margin-top: 10px !important;
    margin-left: 20px !important;
    width: 300px;
    height: 60px !important;
    line-height: 60px !important;
    color: #36b368;
    font-size: 30px !important;
    font-weight: 700 !important;
    display: inline-block !important;
  }

  .desc {
    width: 100% !important;
    height: 60px !important;
    line-height: 60px !important;
    color: gray !important;
    text-align: center !important;
  }

  .forgot {
    float: right;
  }

  .captcha-container {
    position: relative;
    display: inline-block;

    .captcha {
      width: 111px;
      height: 36px;
      margin: 0 0 0 5px;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(51, 51, 51, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        font-size: 12px;
        color: white;
      }
    }
  }
}
</style>